import React from 'react';
import './Header.css'

const Header = () => {
    return (
        <div className='my-header-container'>
            <div className="user">
                <div className="user-avatar">
                    <img src="https://img1.baidu.com/it/u=1994859516,3472573535&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400" alt="" />
                </div>
                <div className="user-info">
                    <div className="user-nickName">tbNick_varow</div>
                    <div className="user-name">
                        <span>账号名称： </span>
                        <span>无怨无悔111111111</span>
                    </div>
                    <div className="user-fan">
                        <span >关注 0</span>
                        <span> | </span>
                        <span>粉丝 0</span>
                    </div>
                </div>
            </div>

            <div className="user-group">
                <span className='group-name'>
                    <i className='iconfont '>&#xe65a; &nbsp;</i>
                    淘友圈
                </span>
                <span className='user-friend'>@ 追梦...等三人分享了宝贝</span>
                <span className='user-friendAvatar'>
                    <img src="https://img2.baidu.com/it/u=2078308964,2142755897&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400" alt="" />
                    <img src="https://img2.baidu.com/it/u=2391726625,2951775714&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" />
                    <img src="https://img0.baidu.com/it/u=4141505064,216905741&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" />
                </span>
                <span className='user-icon'><i className='iconfont'>&#xe629;</i></span>
            </div>

            <div className="user-operate">
                <div className="operate-item">
                    <div className="operate-icon iconfont">&#xe60a;</div>
                    <div className="operate-plant">收藏</div>
                </div>
                <div className="operate-item">
                    <div className="operate-icon iconfont">&#xe6d1;</div>
                    <div className="operate-plant">订阅店铺</div>
                </div>
                <div className="operate-item">
                    <div className="operate-icon iconfont">&#xe663;</div>
                    <div className="operate-plant">足迹</div>
                </div>
                <div className="operate-item">
                    <div className="operate-icon iconfont">&#xe626;</div>
                    <div className="operate-plant">零钱 ￥0.00</div>
                </div>
            </div>
        </div>
    )
}

export default Header